<template>
  <div :class="switchValue == '' ? 'home_dark' : 'home_' + switchValue ">
    <div class="second-page">
      <div class="wrap">
        <!-- //header -->
        <headerCom2 active="help"></headerCom2>
      </div>
      <div class="banner">
        <div class="wrap">
          <div class="banner-left-title">
            <p>服务指南</p>
          </div>
          <div class="banner-right-crumbs">
            <p>您的位置：首页 > 服务指南 > {{ navText }}</p>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="left_lesf">
          <!-- <ul v-if="xtdhIf">
                <li
                  class="grid"
                  v-for="(item, index) in xtdhData.currentPageData"
                  :key="index"
                  @click="xtdhClick(item.link, item.sysId, item.CHILDS,item.NAME,item.BELONG)"
                >
                  <div class="grid_box" @mouseleave="movehover" :style="{background: item.BELONG == 1 ? '#18A0FB' : (item.BELONG == 2 ? '#0ACF83' : (item.BELONG == 3 ? '#FF7262':'#0085FF'))}">
                    <img
                      :src="item.darkImg"
                      alt
                    />
                  </div>
                  <p style="width: 70px;text-align: center;margin:10px 0 0 0">
                    {{ item.NAME }}
                  </p>
                  <div v-if="noPower" @mouseenter="noPower=true" @mouseleave="movehover" class="system-navigation-hover-box">
                    <div class="navigation-content-val">
                      <p>没有权限，无法访问！</p>
                    </div>
                    <div class="navigation-content-btn">
                      <div class="navigation-btn" @click.stop="toFWZN">
                        <p>我知道了</p>
                      </div>
                    </div>
                  </div>
                </li>
          </ul> -->
     

          <div class="csss_bosd">
                <ul >
                  <li
                  class="grid"  style="position: relative;"
                  v-for="(item, index) in xtdhData.currentPageData"
                  :key="index"
                  @click="xtdhClick(item.link, item.sysId, item.CHILDS,item.NAME,item.BELONG)"
                >
                  <div class="grid_box" @mouseleave="movehover" :style="{background: item.BELONG == 1 ? '#18A0FB' : (item.BELONG == 2 ? '#0ACF83' : (item.BELONG == 3 ? '#FF7262':'#0085FF'))}">
                    <img
                      :src="item.darkImg"
                      alt
                    />
                  </div>
                  <p class="p_title">
                    {{ item.NAME }}
                  </p>
                  <div v-if="noPower" @mouseenter="noPower=true" @mouseleave="movehover" class="system-navigation-hover-box">
                    <div class="navigation-content-val">
                      <p>没有权限，无法访问！</p>
                    </div>
                    <div class="navigation-content-btn">
                      <div class="navigation-btn" @click.stop="toFWZN">
                        <p>我知道了</p>
                      </div>
                    </div>
                  </div>
                </li>
                </ul>
              </div>
          <!-- <div v-else class="system_child">
                          <div class="system_child_item">
                            <span class="title_03">{{name}}</span>
                            <span class="close" @click="close_c"></span>
                          </div>
                          <div class="sys_list" >
                            <div class="item_c" v-for="item in child" :key="item.name">
                              <div class="sys_top_box">
                                <div :style="{background: item.BELONG == 1 ? '#18A0FB' : (item.BELONG == 2 ? '#0ACF83' : (item.BELONG == 3 ? '#FF7262':'#0085FF'))}" :class="[item.IS_WEAKLESS === '1' ? 'top_iconR' : 'top_icon']">
                                  <img :src="item.darkImg" alt=""/>
                                </div>
                                <span class="top_title">{{item.name}}</span>
                                <span class="top_btn" @click="getAllData(item.sysId)">查看指南</span>
                              </div>
                              <div class="sys_text"><span class="test_idfsd">技术支持部门：</span> {{item.jszc ? item.jszc.ZCBM : ''}}，<span class="test_idfsd">技术支持人员：</span> {{item.jszc ? item.jszc.ZCRY :''}} <span class="test_idfsd">联系电话:</span> {{item.jszc ? item.jszc.LXDH : ""}}</div>
                            </div>
                          </div>
                </div> -->

        </div>
        <div class="right-module-box"
        style="width:50vw;height:auto;margin:10px 0 0 10px"
        v-loading="loading"
            element-loading-text="加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.01)"
            element-loading-custom-class="right_loading"
        
        >
        <el-tabs v-model="activeName" @tab-click="getAllData(activeName)">
          <el-tab-pane v-for="item in child" :key="item.name" :label="item.name" :name="item.sysId">
            <el-col style="padding-left: 1rem;">
                  <el-row>
                    <!-- <el-col class="rightmsg-title-box">
                      <h3 v-text="systemInfo.name" class="info-divider"></h3>
                    </el-col> -->
                    <el-col v-if="systemInfo.contact.zcbm || systemInfo.contact.zcry || systemInfo.contact.lxdh" class="system-contact" style="background: rgb(102,102,102,0.08);
    display: inline-flex;
    align-items: center;
    padding: 10px;" >
                      <label style="color: #ffffff;
          font-size: .35rem;">技术支持部门：</label>
                      <label
                      style="color: #ffffff;
          font-size: .35rem;"
                        v-text="
                          systemInfo.contact.zcbm
                            ? systemInfo.contact.zcbm
                            : '无'
                        "
                        class="system-contact-info"
                      ></label
                      >
                      <label style="color: #ffffff;
          font-size: .35rem;">技术支持人员：</label>
                      <label
                      style="color: #ffffff;
          font-size: .35rem;"
                        v-text="
                          systemInfo.contact.zcry
                            ? systemInfo.contact.zcry
                            : '无'
                        "
                        class="system-contact-info"
                      ></label>
                      <label style="color: #ffffff;
          font-size: .35rem;">联系电话：</label>
                      <label
                      style="color: #ffffff;
          font-size: .35rem;"
                        v-text="
                          systemInfo.contact.lxdh
                            ? systemInfo.contact.lxdh
                            : '无'
                        "
                        class="system-contact-info"
                      ></label
                      >
                    </el-col>
                    <el-col class="rightmsg-title-box">
                      <h3 v-if="systemInfo.czsc.id" class="info-divider">操作手册</h3>
                    </el-col>
                    <el-col style="margin-left:0.7rem">
                      <el-button
                        v-if="systemInfo.czsc.id"
                        type="primary"
                        size="small"
                        icon="el-icon-download"
                        @click="downloadFile(systemInfo.czsc.id)"
                        >最新手册</el-button
                      >
                      <template v-if="!showHistButton">
                        <el-button
                          v-show="systemInfo.czsc.versionList.length > 0"
                          type="info"
                          size="small"
                          icon="el-icon-view"
                          @click="showHistButton = true"
                          >历史版本</el-button
                        >
                      </template>
                      <template v-else>
                        <template v-for="item in systemInfo.czsc.versionList">
                          <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-download"
                            @click="downloadFile(item['ID'])"
                            >{{ item["VERSIONNAME"] }}</el-button
                          >
                        </template>
                        <el-button
                          v-show="systemInfo.czsc.versionList.length > 0"
                          type="info"
                          size="small"
                          icon="el-icon-view"
                          @click="showHistButton = false"
                          >收起</el-button
                        >
                      </template>
                    </el-col>
                    <template v-if="systemInfo.zxgn.length > 0">
                      <el-col class="rightmsg-title-box">
                        <h3 class="info-divider">最新功能</h3>
                      </el-col>
                      <el-col class="collapse-content-item">
                        <el-collapse accordion>
                          <template v-for="(item, index) in systemInfo.zxgn">
                            <el-collapse-item :key="item.id">
                              <label
                                slot="title"
                                v-text="index + 1 + '、' + item.title"
                                style="padding-left: 20px"
                              ></label>
                              <div
                                v-html="item.content"
                                style="padding: 0px 30px"
                              ></div>
                            </el-collapse-item>
                          </template>
                        </el-collapse>
                      </el-col>
                    </template>
                    <template v-if="systemInfo.cjwt.length > 0">
                      <el-col class="rightmsg-title-box">
                        <h3 class="info-divider">常见问题</h3>
                      </el-col>
                      <el-col>
                        <el-collapse accordion>
                          <template v-for="(item, index) in systemInfo.cjwt">
                            <el-collapse-item :key="item.id">
                              <label
                                slot="title"
                                v-text="index + 1 + '、' + item.title"
                                style="padding-left: 20px"
                              ></label>
                              <div v-html="item.content"></div>
                            </el-collapse-item>
                          </template>
                        </el-collapse>
                      </el-col>
                    </template>
                  </el-row>
                </el-col>
          </el-tab-pane>
        </el-tabs>
 
        </div>
      </div>
      <footerCom></footerCom>
    </div>
  </div>
</template>

<script scoped>
import '@/utils/rem.js'
import footerCom from "./footerCom.vue"
import HeaderCom2 from './headerCom2.vue';
export default {
  name: "help-center",
  props: {},
  components: {
    footerCom,
    HeaderCom2
  },
  computed: {},
  data() {
    return {
       xtdhData: {
        currentPageData: [], //当前页显示内容
        pageSize: 20,
        curPage: 1,
        totalPage: 1,
      },
      index:true,
      activeName:'',
      loading:false,
      list:[],
      activeMenu: "1",
      xtdhIf:true,
      noPower:false,
      navText: "",
      switchValue: 'dark',
      keywords: "",
      currentLocation: "",
      showHistButton: false,
      menuList: [],
      interfaceName: "antu.newportal-zjx.provider.portal.PortalProvider",
      userId: localStorage.getItem("USER_ID"),
      username: "",
      userpwd: "",
      systemInfo: {
        name: "",
        contact: {
          zcbm: "",
          zcry: "",
          lxdh: "",
        },
        czsc: {
          id: "",
          versionName: "",
          versionList: [],
        },
        zxgn: [],
        cjwt: [],
      },
    };
  },
  created() {
    
    // 获取用户所选主题
    this.getUserStyle();
    this.getUserLinkPower();
    this.getLoginUrLInfo();
  },
  mounted() {
    document.documentElement.scrollTop = document.body.scrollTop = 0;
  },
  methods: {
     // 关闭
    close_c(){
      this.xtdhIf = true;
    },
     // 获取登录名和密码
    getLoginUrLInfo() {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: this.interfaceName,
          methodName: "getLoginUrLInfo",
          args: [this.userId],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            response.result = JSON.parse(response.result);
            this.username = response.result.loginName;
            this.userpwd = response.result.pwd;
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
     // 上一页
    systemNavigationPrev() {
      if (this.xtdhData.curPage == 1) return;
      this.xtdhData.curPage--;
      this.setCurrentPageData();
 
    },
    movehover() {
      this.noPower = false
    },
    // 下一页
    systemNavigationNext() {
      if (this.xtdhData.curPage == this.xtdhData.totalPage) return;
      this.xtdhData.curPage++;
      this.setCurrentPageData();
    },
      //分页
    fenye: function () {
      // 计算一共有几页
      this.xtdhData.totalPage = Math.ceil(
        this.navigatorLink.length / this.xtdhData.pageSize
      );
      // 计算得0时设置为1
      this.xtdhData.totalPage =
      this.xtdhData.totalPage == 0 ? 1 : this.xtdhData.totalPage;
      this.setCurrentPageData();
    },
      // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
    setCurrentPageData: function () {
      let begin = (this.xtdhData.curPage - 1) * this.xtdhData.pageSize;
      let end = this.xtdhData.curPage * this.xtdhData.pageSize;
      this.xtdhData.currentPageData = this.navigatorLink.slice(begin, end);
      console.log(this.xtdhData.currentPageData,'data')
      this.child = this.xtdhData.currentPageData[0].CHILDS
      this.activeName = this.child[0].sysId
      this.getAllData(this.child[0].sysId)
      // this.xtdhClick(this.xtdhData.currentPageData[0].CHILDS[0].link,this.xtdhData.currentPageData[0].CHILDS,this.xtdhData.currentPageData[0].NAME,this.xtdhData.currentPageData[0].BELONG)
    },
      // 获取用户有权限的系统
    getUserLinkPower() {
      let that = this;
      this.$.ajax({
        url: that.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: that.interfaceName,
          methodName: "getUserLinkBy2Level",
          args: [that.userId, 1, 200],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            response.result = JSON.parse(response.result);
            let tmpResDatas = [];

            let resData = [];

            let bgColor = { };

            resData = response.result;

            resData.map((item) => {
              let tmpObj = item;
              tmpObj["lightImg"] = that.$API.iconUrl + item["LIGHT"];

              tmpObj["darkImg"] = that.$API.iconUrl + item["DARK"];

              tmpObj["bgColor"] = bgColor[item.BELONG];

              tmpResDatas.push(tmpObj);
            });

            that.navigatorLink = tmpResDatas;
            console.log(tmpResDatas,3423423)
            this.list = tmpResDatas;
            that.fenye();
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
      xtdhClick(link, sysId,child,name,BEL) {
        console.log(link, sysId,child,name,BEL,'323423432')
      if(child.length == 0){
        this.$alert('暂无权限无法访问', {
          confirmButtonText: '确定',
          })
        return
      }
      this.name = name;
      // child.forEach(v => {
      //    v["darkImg"] = this.$API.iconUrl + v["darkIcon"];
      // })
      for(var i in child){
        child[i].BELONG = BEL
      }
      this.xtdhIf = false;
      this.child = child;
      console.log(this.child,'cjild')
      this.activeName = this.child[0].sysId
      this.getAllData(this.child[0].sysId)
    },
    // 获取用户主题
    getUserStyle() {
      let that = this
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
          methodName: "getUserStyle",
          args: [localStorage.getItem("USER_ID")],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            if (response.result == "0") {
              that.switchValue = 'dark';
            } else {
              that.switchValue = 'light';
            }
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },

    getAllData(sysid) {
      
      this.loading = true;
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName:
            "antu.newportal-zjx.provider.helpcenter.HelpCenterProvider",
          methodName: "getSystemInfoById",
          args: [sysid],
        },
        dataType: "json",
        success: (response) => {
            if (response.status == "0") {
              this.loading = false;
              
              this.showSystemInfo( JSON.parse(response.result));
              console.log(this.loading,this.showSystemInfo,123213)
            }
            // console.log(JSON.parse(response.result))
        },
        error: (xhr) => {
              setTimeout(function() {
              this.loading = false;
            }, 3000);
        },
      });
    },
    showSystemInfo(item) {
      this.activeMenu = item.ID;
      this.navText = item["NAME"];

      this.showHistButton = false;
      this.systemInfo = {
        name: "",
        contact: {
          zcbm: "",
          zcry: "",
          lxdh: "",
        },
        czsc: {
          id: "",
          versionName: "",
          versionList: [],
        },
        zxgn: [],
        cjwt: [],
      };
      this.currentLocation = item["NAME"];
      this.systemInfo.name = item["NAME"];
      if (item["技术支持"]) {
        this.systemInfo.contact.zcbm = item["技术支持"]["ZCBM"];
        this.systemInfo.contact.zcry = item["技术支持"]["ZCRY"];
        this.systemInfo.contact.lxdh = item["技术支持"]["LXDH"];
      }
      if (item["操作手册"]) {
        this.systemInfo.czsc.id = item["操作手册"]["ID"];
        this.systemInfo.czsc.versionName = item["操作手册"]["VERSIONNAME"];
      }
      if (item["历史版本"]) {
        this.systemInfo.czsc.versionList = item["历史版本"];
      }
      if (item["最新功能"]) {
        item["最新功能"].forEach((item) => {
          this.systemInfo.zxgn.push({
            id: item["TITLE"],
            title: item["TITLE"],
            content: unescape(item["CONTENT"]),
          });
        });
      }
      if (item["常见问题"]) {
        item["常见问题"].forEach((item) => {
          this.systemInfo.cjwt.push({
            id: item["TITLE"],
            title: item["TITLE"],
            content: unescape(item["CONTENT"]),
          });
        });
      }
      console.log(this.systemInfo,'sys')
    },
    downloadFile(id) {
      window.open(
        "http://172.18.2.151:32003/helpcenter/HelpCenterProvider/getFileById/" +
          id
      );
    },
     clicklINK(LINK){
      location.href = LINK +(LINK.indexOf('?')>0 ? "&" :"?")  + "uid=" +
              this.username +"&pwd=" + this.userpwd ;
    },
  },
};
</script>

<style lang="less" scoped>
// @import "./css/light.less";
@import "./css/userInfo.less";
@import "./css/dark.less";
.second-page {
  

  .content {
    background: none;
  }
}
  .el-collapse-item__wrap{
    overflow: inherit;
  }
  .main .rigth_lesf{
    overflow-x: scroll;
  }
  .main .el-collapse-item__content img{
    max-width: 700px;
  }
  .second-page .main .rigth_lesf::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px!important;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 0px!important;
  }
.second-page .main .rigth_lesf::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px!important;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2)!important;
  background   : #535353!important;
  }
.second-page .main .rigth_lesf::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2)!important;
  border-radius: 10px!important;
  background   : rgba(252, 252, 252, 0.88)!important;
  }
  .grid_box{
    cursor: pointer;
  }
  .home_light .p{
    color: #000!important;
  }
              .system-navigation-hover-box{
              position: absolute;
              left: 0;
              top: -10px;
              width: 350px;
              height: 120px;
              background-color: rgba(24, 65, 141, 0.65);
              display: none;
              z-index: 10;
              font-size: 14px;
              box-sizing: border-box;
              padding: 5px;
              padding-left: 23px;
              border-radius: 5px;
            }

            .navigation-content-val{
              color: #ffffff;
              text-align: left;
              padding: 0 5px;
            }

            .navigation-content-btn{
              width: 88px;
              height: 34px;
              text-align: center;
            }

            .navigation-btn{
              width: 88px;
              height: 34px;
              text-align: center;
              margin-top: 36px;
              line-height: 33px;
              background: rgba(0,133,255,.65);
            }

            &:hover .system-navigation-hover-box{
              display: block;
            }
</style>

